import React from 'react'
var store = require('store');
var Button = component('Button')
var FaceButton = component('FaceButton')
var Grid = component('Grid')
var TipsBanner = component('TipsBanner')

var config = require('../../config.js').bigBonus;
var perfectConfig = require('../../config.js').perfectBonus;
var bigBonusCount = config.count + perfectConfig.count;
var PrepareBigBonus = model('PrepareBigBonus');
var BigBonus = model('BigBonus');
var selectedAduio = require('../../Resource/sound/ddd.mp3');
var wrongAduio = require('../../Resource/sound/wrong.mp3');
const prepareBigBonus = 'prepareBigBonus';

var Style = require('./style.css')

module.exports = React.createClass({
    getInitialState() {
        return {
            step: {
                name: '',
                picked: '',
                leave: ''
            },
            total: {
                picked: '',
                leave: ''
            },
            tipsClose: true
        };
    },
    cellRender(data){
        return <FaceButton key={data} selected={data.selected}/>
    },
    componentDidMount() {
        this.updateStep();
    },

    updateStep(){
        var self = this;
        var pickPack = PrepareBigBonus.getCurrentPickPack()
        var step = PrepareBigBonus.getStep();

        console.log(PrepareBigBonus._getCurrentStepNumber());
        
        step.picked = pickPack.length;
        step.leave = step.count - step.picked;
        var total = {
            picked:  BigBonus.getAll().length + pickPack.length
        };
        total.leave = BigBonus.config.count - total.picked;
        var data = PrepareBigBonus.getAll();

        this.setState({data: data, step: step, total: total});
    },

    onSelectFace(selected, value){
        global.wrong = this.refs.wrong;
        try{
            selected ? PrepareBigBonus.unpick(value.index) : PrepareBigBonus.pick(value.index);
        } catch(e) {
            this.refs.wrong.pause();
            this.refs.select.src = wrongAduio;
            this.refs.wrong.play();
            throw e;
        }
        this.refs.select.pause();
        this.refs.select.src = selectedAduio;
        this.refs.select.play();
        this.updateStep();
        return true;
    },

    selectBigBonus() {// 初始化大奖名单
        if (model('BigBonus').getAll() != '') {
            return false;
        }
        model('BigBonus').prepareData();
        var self = this,
            bigBonus = model('BigBonus').getAll(),
            data = this.state.data,
            nArr = [],
            t = 0,
            timer;

        //筛选出大奖名单序号
        for (var i = 0; i < bigBonus.length; i++) {
            for (var k = 0; k < data.length; k++) {
                if (bigBonus[i].id == data[k].id) {
                    nArr.push(k);
                }
            }
        }

                self.refs.select.play();
        //循环点亮大奖名单
        timer = setInterval(function() {
            if (t >= nArr.length) { //抽完大奖名单
                store.set(prepareBigBonus, data); //存储大奖名单
                self.refs.select.pause();
                clearInterval(timer);
                self.setState({
                    tipsClose: false
                });
                return false;
            }else {
                data[nArr[t]].selected = true;
                t++;
                self.setState({
                    data: data
                });
            }
        }, 200);
    },

    onConfirm(){ //關閉彈框
        if (!this.state.tipsClose) return;
        PrepareBigBonus.nextStep();
        this.setState({tipsClose: false});
        this.updateStep();
    },

    closeTips(){
        this.setState({tipsClose: true});
    },

    render(){
        return (
            <div className={global.baseStyle.body}>
                <div className={Style.container}>
                    <Grid col={16} data={this.state.data} cellRender={this.cellRender} />
                    <div className={Style.info}>

                        <span className={Style.btn} onClick={this.selectBigBonus}>抽</span>
                    </div>
                </div>
                <audio ref="wrong" src={wrongAduio}/>
                <audio ref="select" loop src={selectedAduio}/>
                {!this.state.tipsClose && <TipsBanner name={bigBonusCount + "个幸运儿已诞生！"} onClose={this.closeTips}/>}
            </div>
        );
    }
});